<template>
  <CategorySelectorStore></CategorySelectorStore>
  <SpuTable
    v-if="isShow === 1"
    @setIsShow="setIsShow"
    @setSpu="setSpu"
  ></SpuTable>
  <SaveOrUpdateSpu
    v-else-if="isShow === 2"
    @goSpuList="setIsShow"
    :spu="spu"
  ></SaveOrUpdateSpu>
  <SaveSku v-else :spu="spu" @setIsShow="setIsShow"></SaveSku>
</template>

<script lang="ts">
export default {
  name: "LSpu",
};
</script>

<script lang="ts" setup>
import CategorySelectorStore from "@/components/CategorySelector/CategorySelectorStore.vue";
import SpuTable from "./components/SpuTable.vue";
import { ref } from "vue";
import type { SpuFormData } from "@/Api/product/model/spu";
// import spuForm from "./components/spuForm.vue";
import SaveOrUpdateSpu from "./components/SaveOrUpdateSpu.vue";
import SaveSku from "./components/SaveSku.vue";

// const isShowSpuList = ref(true);

// const setIsShowSpuList = (val: boolean) => {
//   isShowSpuList.value = val;
// };

// 枚举具有语义化
enum IsShow {
  "SpuList" = 1,
  "SaveOrUpdateSpu" = 2,
  "SaveSku" = 3,
}

// 因为有2个以上的组件需要判断  所有布尔值做不到  就用数字来判断
const isShow = ref<IsShow>(1);

const spu = ref<SpuFormData>({
  spuName: "",
  tmId: undefined,
  description: "",
  spuImageList: [],
  spuSaleAttrList: [],
});
// IsShow

const setSpu = (val: SpuFormData) => {
  // console.log(val);
  spu.value = val;
};

const setIsShow = (val: IsShow) => {
  isShow.value = val;
};
</script>

<style scoped></style>
